<template>
  <div class="app-container">
    <div class="app-title">
      <h2>请选择您需要的项目<em>？</em></h2>
    </div>
    <div class="image-list">
      <div class="image-item" v-for="(item, index) in anchorType" :key="item.id">
        <div class="image-item-box" @click="isChecked(index)">
          <van-image width="10rem" height="15rem" fit="cover" :src="item.image" radius="8" />
          <span><i>{{ item.title }}</i></span>
        </div>
        <div class="image-item-checked">
          <van-checkbox v-model="item.checked" shape="square"></van-checkbox>
        </div>
      </div>
    </div>
    <div class="submit-btn">
      <van-button type="primary" block @click="submitPay" :loading="isLoading" :disabled="totalMoney == 0 || isOrder">{{
        `支付(${totalMoney.toFixed(2)}元)`
      }}</van-button>
    </div>
    <van-popup v-model:show="showBottom" round position="bottom" closeable :style="{ height: '460px' }" teleport="body">
      <div class="pay-code">
        <van-row>
          <van-col span="24">
            <div class="order-number">
              <span style="color:#333">订单编号：</span>
              <span style="color:#333">{{ orderNumber }}</span>
            </div>
          </van-col>
          <van-col span="24">
            <div class="pay-code-image">
              <van-image width="20rem" height="20rem" fit="cover" :src="Img02" shape="square" />
            </div>
          </van-col>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>
<script setup>

import { computed, reactive, toRefs, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import Img01 from "@/assets/image/img01.png"
import Img02 from "@/assets/image/img02.png"
import { showToast } from 'vant';
import {
  OrderGetCode, // 新增订单
  CreateOrder, // 新增订单
} from "@/api/index.js"

const route = useRoute()

const state = reactive({
  anchorType: [
    {
      id: 1,
      title: "面对面视频",
      image: Img01,
      checked: false,
      money: 50.00,
    },
    {
      id: 2,
      title: "查看相册",
      image: Img02,
      checked: false,
      money: 68.00,
    }
  ],
  orderNumber: "", // 订单编号
  isOrder: false
})

const { anchorType, orderNumber, isOrder } = toRefs(state)

const isChecked = (index) => {
  state.anchorType[index].checked = !state.anchorType[index].checked
}

const totalMoney = computed(() => {
  state.isOrder = false
  return state.anchorType.filter(o => o.checked).reduce((pcr, cur) => {
    return pcr + cur.money
  }, 0)
})

let showBottom = ref(false)
let isLoading = ref(false)
const payOrder = async () => {
  let params = {
    "anchorId": route.query.id,
    "payAmount": state.anchorType.filter(o => o.checked).reduce((cur, pro) => (cur + pro.money), 0),
    types: state.anchorType.filter(o => o.checked).map(o => o.title).join(",")
  }
  isLoading.value = true
  try {
    let data = await CreateOrder(params)
    state.orderNumber = data.data.orderNo
    showBottom.value = true
    isOrder.value = true
    isLoading.value = false
  } catch (error) {
    showToast('订单创建失败，请联系管理员');
    isLoading.value = false
  }

}

// 提交支付
const submitPay = () => {
  payOrder()
}

const getOrderCode = async () => {
  let data = await OrderGetCode()
}

onMounted(() => {
  getOrderCode()
})

</script>



<style lang="scss" scoped>
.app-container {
  max-width: 500px;
  margin: 0 auto;
}

.app-title {
  margin: 40px 20px 30px 20px;
  font-size: 14px;

  em {
    font-size: 14px;
    margin-left: 5px;
  }
}

.image-list {
  display: flex;

  .image-item {
    margin-left: 1rem;
    height: 15rem;

    .image-item-checked {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
}

.image-item-box {
  position: relative;
  height: 15rem;
  border-radius: 8px;
  overflow: hidden;

  span {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    line-height: 15rem;
    color: #fff;
    font-size: 20px;
    font-style: italic
  }
}

.submit-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.pay-code {
  text-align: center;
  padding-top: 40px;

  .order-number {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 20px;
  }
}</style>
